<template>
    <el-dialog
        v-dialogDrag
        title="修改密码"
        width="35%"
        :close-on-click-modal="false"
        :visible.sync="visible"
        @close="handleClose"
        :center="true"
    >
        <el-form :model="dataForm" ref="dataForm" label-width="80px">
            <el-form-item label="新的密码" prop="userPwd">
                <el-input
                    show-password
                    v-model="dataForm.userPwd"
                    placeholder="请输入新密码"
                    @blur="usePwdValidate(dataForm.userPwd)"
                ></el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPwd">
                <el-input show-password v-model="dataForm.confirmPwd" :disabled="pwdDisabled" placeholder="请再输一次新密码"></el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" :disabled="pwdIsRight" @click="addDataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
var pwdRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/;

export default {
    data() {
        return {
            visible: false,
            pwdDisabled: true,
            pwdIsRight: false,

            dataForm: {
                userPwd: '', //新密码
                confirmPwd: '' //确认密码
            }
        };
    },

    methods: {
        handleClose() {
            this.dataForm = {};
            this.visible = false;
        },

        //初始化
        init() {
            this.visible = true;
        },

        // 密码验证
        usePwdValidate(val) {
            if (!pwdRegex.test(val)) {
                this.$message.error('请输入6-18位包含数字和字母的密码');
                this.pwdDisabled = true;
            } else {
                this.pwdDisabled = false;
            }
        },
        
        // 再次确认密码验证
        comfirmUsePwdValidate(val) {
            if (this.dataForm.userPwd !== this.dataForm.confirmPwd) {
                this.$message.error('两次密码输入不一致');
                this.pwdIsRight = false;
            } else {
                this.pwdIsRight = true;
            }

            return this.pwdIsRight;
        },

        // 表单提交
        addDataFormSubmit() {
            if (this.comfirmUsePwdValidate() == true) {

                let params = cloneDeep(this.dataForm);
                params.userId = sessionStorage.getItem('userId');

                API.login.changePassword(params).then((data) => {
                    if (data.code == '0000') {
                        this.$message({
                            message: `修改密码成功`,
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false;
                                localStorage.removeItem('ms_username');
                                this.$router.push('/login');
                                sessionStorage.removeItem('menuId');
                            }
                        });
                    }
                });
            }
        }
    }
};
</script>